<template>
	<a-modal v-bind="options" class="bill-batch-handle-dialog">
		<div class="tips">
			<div>
				共选中
				<strong v-color="{color: 'primary'}">{{ bills.length }}</strong>
				条账单
			</div>
			<a-divider type="vertical" />
			<div>
				<a-typography-text type="secondary">收款</a-typography-text>
				<strong v-color="{color: 'primary'}">+{{ sum.in.toLocaleString() }} 元</strong>
			</div>
			<a-divider type="vertical" />
			<div>
				<a-typography-text type="secondary">付款</a-typography-text>
				<strong v-color="{color: 'danger'}">{{ sum.out.toLocaleString() }} 元</strong>
			</div>
			<a-divider type="vertical" />
			<div>
				<a-typography-text type="secondary">合计</a-typography-text>
				<strong>{{ sum.total.toLocaleString() }} 元</strong>
			</div>
		</div>
		<a-typography-paragraph strong>
			<blockquote>审核信息</blockquote>
		</a-typography-paragraph>
		<a-form :model="entity" ref="formRef">
			<a-form-item label="审核意见" name="auditComment" :rules="[{required: true, message: '审核意见不能为空'}]">
				<a-textarea v-model:value="entity.auditComment" placeholder="请输入审核意见" show-count :maxlength="500" />
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button type="primary" danger :loading="loadings.audit" @click="submit(2)">驳回</a-button>
			<a-button type="primary" :loading="loadings.audit" @click="submit(1)">通过</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
	import {computed, reactive, ref, toRef, watchEffect} from 'vue'
	import {FormInstance, message} from 'ant-design-vue'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {Img} from 'yuxin-base/src/types'
	import {DEFAULT_FIELD_NAME, DIC_PID_MAP} from 'yuxin-base/src/constant'
	import {financeBillAffirmFinanceBatch} from '@/api/bill'
	import {financeBillAuditBatch} from '@/api/details'
	import DATE_FORMAT, {nowDateTime} from 'yuxin-base/src/utils/date'
	import dayjs, {Dayjs} from 'dayjs'
	import {range} from 'xe-utils'

	const props = defineProps<{
		visible: boolean
		bills: any[]
	}>()
	const formRef = ref<FormInstance>()
	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		title: '批量审核',
		width: 1000,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: false,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
		}
	})
	const loadings = reactive({
		audit: false,
		detail: false
	})
	// 通过&&驳回
	const submit = (result: number) => {
		formRef.value?.validate().then(() => {
			entity.ids = props.bills.map(o => o.id)
			entity.result = result
			loadings.audit = true
			financeBillAuditBatch(entity)
				.then(() => {
					message.success('操作成功')
					setTimeout(() => emits('close'), 100)
					emits('update:visible', false)
					formRef.value?.resetFields()
				})
				.finally(() => (loadings.audit = false))
		})
	}
	const entity = reactive<any>({
		// 审核意见
		auditComment: null,
		ids: null,
		result: null
	})

	const files = ref<Img[]>([])

	const sum = computed(() => {
		const amounts = props.bills.map(o => o.totalMoney)

		return {
			in: Number(
				amounts
					.filter(num => num > 0)
					.reduce((per, curr) => per + curr, 0)
					.toFixed(2)
			),
			out: Number(
				amounts
					.filter(num => num < 0)
					.reduce((per, curr) => per + curr, 0)
					.toFixed(2)
			),
			total: Number(amounts.reduce((per, curr) => per + curr, 0).toFixed(2))
		}
	})

	const disabledDate = (current: Dayjs) => {
		return current && current > dayjs()
	}

	const disabledTime = () => {
		const now = dayjs()

		return {
			disabledHours: () => range(0, 24).filter(o => o > now.hour()),
			disabledMinutes: () => range(0, 60).filter(o => o > now.minute()),
			disabledSeconds: () => range(0, 60).filter(o => o > now.second())
		}
	}

	const paymentMethods = ref<any[]>([])

	watchEffect(() => {
		if (props.visible) {
			// 默认支付时间为当前时间
			entity.practicalTime = nowDateTime()
			settingApi.getDicListByPid(DIC_PID_MAP['PAYMENTMETHOD@PAYMENTMETHOD']).then(({data}) => (paymentMethods.value = data))
		}
	})
</script>

<style lang="less">
	.bill-batch-handle-dialog {
		.ant-modal-body {
			.ant-form-item-label {
				width: 110px;
			}

			.tips {
				display: flex;
				background: #e5efff;
				padding: 12px 16px;
				align-items: center;

				> div:not(.ant-divider) {
					flex: 1;

					&:not(:first-child) {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>
